<!--培训系统模板-->
<template>
<div class="content"> 
	<Back v-bind:isDefault="true"></Back>
	<Battery></Battery>
	<Title v-bind:hasHelp="false" v-bind:title="this.$route.params.title"></Title>
	<div class="container">
				<div class="dm-more">
					<ul class="dm-morea">
						    <li>
						    	<img src="images/ser.png" @click="search=!search,cont=false,sett=false"/>
							    <div class="dm-more-content" :style="{display:search?'block':'none'}">
							    	<div class="dm-moreaa clearfix">
							   	  	  <div class="dm-moreaal"><span>搜索</span></div>
							   	  	  <div class="dm-moreaar" @click="search=!search"></div>
							   	    </div>
							   	    <div class="dm-moreaf clearfix" >
							   	    	<div class="dm-moreafl"><input type="text" v-model="sea"/></div>
							   	    	<div class="dm-moreafr" @click="searchContent(sea)"><a href="#">查 询</a></div>
							   	    </div>
							    </div>
						    </li>
							<li>
							   <img src="images/ml.png" @click="cont=!cont,search=false,sett=false"/>
							   <div class="dm-more-content" :style="{display:cont?'block':'none'}" >
							   	  <div class="dm-moreaa clearfix">
							   	  	  <div class="dm-moreaal"><span>目录</span></div>
							   	  	  <div class="dm-moreaar" @click="cont=!cont"></div>
							   	  </div>
							   	  <div class="dm-Height"  id='dmCatalog'>
							   	  </div>
							   </div>
						    </li>
							<li>
								<img src="images/sz.png" @click="sett=!sett,serach=false,cont=false"/>
								<div class="dm-more-content" :style="{display:sett?'block':'none'}">
							   	  <div class="dm-moreaa clearfix">
							   	  	  <div class="dm-moreaal"><span>设置</span></div>
							   	  	  <div class="dm-moreaar" @click="sett=!sett"></div>
							   	  </div>
							   	  <div class="dm-moread clearfix">
							   	  	 <div class="dm-moreadl">主题颜色：</div>
							   	  	 <div class="dm-moreadr dm-bg-click">
							   	  	 	<a href="javascript:" @click="color='#f6f4ec',setColor(color)">灰色</a>
							   	  	 	<a href="javascript:" @click="color='#dbeed9',setColor(color)">绿色</a>
							   	  	 	<a href="javascript:" @click="color='#e8fdfe',setColor(color)">亮蓝</a>
							   	  	 	<a href="javascript:" @click="color='#f1debd',setColor(color)">黄色</a>
							   	  	 	<a href="javascript:" @click="color='#fdd9d9',setColor(color)">粉色</a>
							   	  	 </div>
							   	  </div>
							   	  <div class="dm-moread clearfix">
							   	  	 <div class="dm-moreadl">字体大小：</div>
							   	  	 <div class="dm-moreadr">
							   	  	 	<a href="javascript:" class="bigger" @click="size=size-2,setFont(size)">A-</a>
							   	  	 	<a href="javascript:" class="smaller" @click="size=size+2,setFont(size)">A+</a>
							   	  	 </div>
							   	  </div>
							   	  <div class="dm-moreae" @click="save"><a href="#">保 存</a></div>
							    </div>
							</li>
						    <li><img src="images/ht.png" @click="ht()"/></li>
						    <li><img src="images/qj.png" onclick="history.go(1)"/></li>
						    <li><img src="images/syz.png" @click="pre(dmIndex-1)" /></li>
						    <li><img src="images/xyz.png" @click="nex(dmIndex+1)"/></li>
					</ul>
				</div>
				<div class="content-dmr"><iframe :src="dm.url" id="publiciframe"  width="100%" height="678" scrolling="no" frameborder="no" border="0"></iframe></div>
			</div>
</div>
</template>
<script>
import Battery from '@/components/Battery'
import Title from '@/components/Title'
import Back from '@/components/Back'
export default {
  name: 'Content',
  components:{
    Battery,
	Title,
	Back
  },data () {
    return {
	 cont:false,//目录
	 search:false,
	 sett:false,
     title:'',
     pid:'',//父页面获取到的值
     folders:[],
	 files:[],
	 dmIndex:0,
	 dm:{},
	 color:'#f6f4ec',
	 size:16,
	 isInit:true,
	 sea:''
    }
  },methods:{
	  getData:function(id){//获取一条dm数据
	  alert(id)
      //渲染左侧数据
      this.axios.get("/ietm/getDataModule",{params:{id:id}}).then(res=>{
		this.dm=res.data;
      });
	  },setColor:function(color){//设置颜色
		document.getElementById('publiciframe').contentWindow.setColor(color);
	  },setFont(size){
		document.getElementById('publiciframe').contentWindow.setFont(size);
	  },
	  pre:function(index){//上一个DM
	  if(index>0){
 		this.dmIndex=index;
		 this.axios.get("/ietm/getDM",{params:{index:index}}).then(res=>{
		 this.dm=res.data;
         });
	  }else{
		  alert('这是第一个数据模块！')
	  }
	  },nex:function(index){//下一个DM
	  	this.dmIndex=index;
 		this.axios.get("/ietm/getDM",{params:{index:index}}).then(res=>{
		 this.dm=res.data;
	  });
	  },ht:function(){
			document.getElementById('publiciframe').contentWindow.history.back();
	  },
	  save:function(){//保存颜色值和d大小到本地数据库
		 window.localStorage.setItem("Content_color",this.color);
		 window.localStorage.setItem("Content_size",this.size);
	  },
	  searchContent:function(sea){
		  document.getElementById('publiciframe').contentWindow.textSearch(sea);
	  }
    
  },created(){//由于页面刷新会触发该钩子函数因此需要根据本地存储数据加载页面
	  if(!this.$route.params.id){
		 this.dmIndex=window.localStorage.getItem("Content_orderCode");
		 this.getData(window.localStorage.getItem("Content_id"));

	  }else{
		 window.localStorage.setItem("Content_orderCode",this.dmIndex);
		 window.localStorage.setItem("Content_id",this.$route.params.id);
		 this.getData(this.$route.params.id);
	  }
	  if(window.localStorage.getItem("Content_color")){//如果颜色不为空初始化就加载
			document.getElementById('publiciframe').contentWindow.setColor(window.localStorage.getItem("Content_color"));
			this.color=window.localStorage.getItem("Content_color");
	  } 

	   if(window.localStorage.getItem("Content_size")){//如果颜色不为空初始化就加载
			document.getElementById('publiciframe').contentWindow.setFont(window.localStorage.getItem("Content_size"));
			this.size=window.localStorage.getItem("Content_size");
	  }
  }, beforeRouteLeave(to,from,next){//该页面不需要换成因此可以用销毁方法
	if(to.name=='Pms'){//离开为返回销毁自身
	this.$destroy();
	}
	next();
 }
}
function context(){
	alert(1111)
}

</script>




<style scoped>
@import url('../../assets/css/content.css');
@import url('../../assets/css/animation.css');
</style>
